<template>
  <div>
    <!-- 轮播图 -->
    <el-carousel :interval="5000" arrow="always" class="carousel">
      <el-carousel-item v-for="(item, index) in banners" :key="index">
        <img :src="item.url" alt="banner" class="carousel-image" />
      </el-carousel-item>
    </el-carousel>

    <!-- 商品展示 -->
    <el-row :gutter="20" class="product-list">
      <el-col :span="12" v-for="item in products" :key="item.id">
        <el-card :body-style="{ padding: '20px' }">
          <div class="product-content">
            <!-- 图片部分 -->
            <img :src="item.sliderUrls" class="product-image" />
            <!-- 文本部分 -->
            <div class="product-info">
              <h4>{{ item.name }}</h4>
              <p>价格:￥{{ item.price }}</p>
              <p>
                <router-link :to="{ path: '/work/des', query: { id: item.id, token: token } }" class="btn-link">前往购买</router-link>
              </p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "axios";

const token = ref('983613da64364eaf9851bb2e1c6db397');

// 商品数据
const products = ref([]);

// 轮播图数据
const banners = ref([
  {
    url: "https://www.helloimg.com/i/2025/02/08/67a70261845bf.jpg",
  },
  {
    url: "https://www.helloimg.com/i/2025/02/08/67a70261845bf.jpg",
  },
  {
    url: "https://www.helloimg.com/i/2025/02/08/67a70261845bf.jpg",
  },
]);

// 获取商品数据
function show() {
  axios.get('http://localhost:8501/admin/product/product/1/999', {
    headers: {
      token: token.value,
    },
  })
      .then((res) => {
        products.value = res.data.data.list;
      })
      .catch((error) => {
        console.error(error);
      });
}

show();
</script>

<style scoped>
/* 按钮样式 */
.btn-link {
  display: inline-block;
  padding: 5px 20px;
  background-color: #409eff;
  color: white;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.3s;
  margin-top: 10px;
}

.btn-link:hover {
  background-color: #66b1ff;
}

.btn-link:active {
  background-color: #2986cc;
}

/* 轮播图图片样式 */
.carousel-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

/* 商品内容样式 */
.product-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 商品图片样式 */
.product-image {
  width: 120px;
  height: 120px;
  object-fit: cover;
  margin-right: 15px;
}

/* 商品信息样式 */
.product-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 商品名称样式 */
h4 {
  margin: 0 0 5px 0;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 商品价格和链接样式 */
p {
  margin: 0;
  font-size: 14px;
}

/* 商品列表样式 */
.product-list {
  padding: 20px;
}

/* 响应式样式 */
@media (max-width: 768px) {
  .carousel-image {
    height: 200px;
  }

  .product-image {
    height: 150px;
  }
}
</style>